<template>
	<view>

		<u-cell-group>
			<u-cell @click="showModal" :title="title" isLink>
				<image slot="icon" class="u-cell-icon" :src="iconUrl" mode="widthFix"></image>
			</u-cell>
		</u-cell-group>

		<u-modal :content="content" :show="show" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close"></u-modal>

		<view class="test">
			<view class="test1">
				111
			</view>
			<view class="test2">
				222
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作',
				show: false,
				title: '基础使用',
				iconUrl: 'https://cdn.uviewui.com/uview/demo/modal/4.png'
			}
		},
		methods: {
			showModal(index) {
				this.show = true
			},

			confirm() {
				this.show = false
				console.log('confirm');
			},
			cancel() {
				this.show = false
				console.log('cancel');
			},
			close() {
				this.show = false
				console.log('close');
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.test {
		display: flex;
		flex-direction: row;
	}
</style>
